<template>
  <div>
    <!-- header总览 -->
    <van-cell-group>
      <van-cell class="header-bg">
        <template #icon>
          <van-image
            width="2rem"
            height="2rem"
            round
            fit="cover"
            :src="teacherInfo.photoUrl | urlWithRand"
          />
        </template>
        <template #right-icon>
          <van-row style="width: 3rem;">
            <van-col>
              <h2 style="margin-left: 0.7rem;line-height: 50%;color: whitesmoke;">{{ userInfo.nickname }}</h2>
            </van-col>
            <van-col>
              <span style="margin-left: 0.7rem;line-height: 50%;color: azure;">职称：{{ teacherInfo.teacherRankShow }}</span>
            </van-col>
          </van-row>
          <van-row style="height: 3rem;">
            <van-button
              color="#45f2be"
              round
              style="position: relative;left: 1.1rem;top: 57%;"
              @click="toEditInfoPage"
            >编辑个人信息</van-button>
          </van-row>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 个人详细信息分类展示 -->
    <van-tabs v-model="infoTabsActiveName">
      <van-tab
        title="基本信息"
        name="basic"
      >
        <van-cell-group style="margin-top: 0.3rem;">
          <van-cell
            title="姓名"
            :value="teacherInfo.realName | nullableText"
          />
          <van-cell
            title="性别"
            :value="teacherInfo.gender | nullableText"
          />
          <van-cell
            title="出生日期"
            :value="teacherInfo.dateOfBirth | nullableText"
          />
          <van-cell
            title="有效证件类型"
            :value="teacherInfo.idCardTypeShow | nullableText"
          />
          <van-cell
            title="有效证件号码"
            :value="teacherInfo.idCardNumber | nullableText"
          />
          <van-cell
            title="教工号"
            :value="teacherInfo.workerNo | nullableText"
          />
        </van-cell-group>
      </van-tab>
      <van-tab
        title="联系方式"
        name="contact"
      >
        <van-cell-group style="margin-top: 0.3rem;">
          <van-cell
            title="手机/电话号码"
            :value="teacherInfo.phoneNum | nullableText"
          />
          <van-cell
            title="邮箱"
            :value="teacherInfo.email | nullableText"
          />
          <van-cell
            title="通讯地址"
            :value="teacherInfo.address | nullableText"
          />
          <van-cell
            title="QQ号"
            :value="teacherInfo.qqNumber | nullableText"
          />
          <van-cell
            title="微信号"
            :value="teacherInfo.wechatNumber | nullableText"
          />
          <van-cell
            title="办公地址"
            :value="teacherInfo.workAddress | nullableText"
          />
        </van-cell-group>

      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

import { Cell, Row, Col, CellGroup, Icon, Tab, Tabs } from 'vant'
import { getAccountByUsername } from '@/api/bussiness/auth/account'
import { getTeacherInfoById } from '@/api/bussiness/member/teacher'

export default {
  name: 'MineCenterStudent',
  components: {
    [Cell.name]: Cell,
    [Row.name]: Row,
    [Col.name]: Col,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  filters: {
    nullableText (val) {
      return val != null ? val : '暂未填写'
    }
  },
  data () {
    return {
      userInfo: { // 用户信息
      },
      teacherInfo: { // 教师信息
      },
      infoTabsActiveName: 'basic' // 个人详细信息标签页当前激活名称
    }
  },
  created () {
    this.refreshTeacherInfo()
  },
  methods: {
    refreshTeacherInfo () { // 刷新教师信息
      getAccountByUsername().then(({ data }) => {
        this.userInfo = data
        getTeacherInfoById(data.userId).then(({ data }) => {
          this.teacherInfo = data
        }).catch(() => { })
      }).catch(() => { })
    },
    toEditInfoPage () { // 跳转个人信息编辑页
      this.$router.push({
        name: 'MineCenterTeacherEditInfo',
        query: { teaId: this.teacherInfo.id }
      })
    }
  }
}
</script>

<style scoped>
.header-bg {
  background-image: url(~@/assets/images/miner-center-bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
